{extend name="base" /}
{block name="body"}
<style>
    .container-fluid {
        padding: 20px;
    }
    .box {
        margin-bottom: 20px;
        float: left;
        width: 220px;
    }
    .box img {
        max-width: 100%
    }
</style>
<div class="layui-body">
    <!--tab标签-->
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">图片管理</li>
            <li class=""><a href="{:url('admin/jump_img/add')}">添加图片</a></li>
        </ul>
        <div class="layui-tab-content">

            <form class="layui-form layui-form-pane" action="{:url('admin/jump_img/index')}" method="get">
                <div class="layui-inline">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline">
                        <select name="cid">
                            <option value="0">全部</option>
                            {foreach name="jumpcategory_level_list" item="vo"}
                            <option value="{$vo.id}" {if condition="$cid==$vo.id"} selected="selected"{/if}>{neq name="vo.level" value="1"}|{php}for($i=1;$i<$vo['level'];$i++){echo ' ----';}{/php}{/neq} {$vo.name}</option>
                            {/foreach}
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">关键词</label>
                    <div class="layui-input-inline">
                        <input type="text" name="keyword" value="{$keyword}" placeholder="请输入关键词" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn">搜索</button>
                </div>
            </form>
            <hr>

            <form action="" method="post" class="ajax-form">
                <div id="masonry" class="container-fluid">
                    {foreach name="$img_list" item="vo"}
                    <div class="box" style="position:absolute;">
                        <img style="width:100%;" src="{$vo.path}" alt="">
                        <div class="operation" style="position:relative;bottom: 33px;color: #fff;padding: 7px 0;text-align:center;background: rgba(0,0,0,0.3);display:none;">
                            <div style="flex:1;border-right:1px solid #fff;"><a style="color:#fff;" href="{:url('jump_img/edit',['id'=>$vo.id])}">编辑</a></div>
                            <div style="flex:1;"><a style="color:#fff;" href="javascript:;" onclick="delete_img({$vo.id});">删除</a></div>
                        </div>
                    </div>
                    {/foreach}
                </div>
                {$img_list->render();}
            </form>
        </div>
    </div>
</div>
{/block}
{block name="js"} 
<script src="__JS__/masonry-docs.min.js"></script>
<script>
    $(document).ready(function(){
        $('.box').mouseover(function(e){
            $(this).children(".operation").css('display','flex');
            // $(this).fadeIn("slow");
        });

        $('.box').mouseout(function(e){
            $(this).children(".operation").css('display','none');
            // $(this).fadeIn("slow");
        });
    });

    function delete_img(id){
        layer.open({
            content: '确定删除?',
            yes: function(index, layero){
                $.get('{:url("jump_img/delete")}',{id:id},function(res){
                    layui.use('layer',function(){
                        var layer = layui.layer;
                        layer.msg(res.msg,{
                            time:1000,
                        },function(){
                            window.location.reload();
                        });
                    })
                });
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

    $(function() {
        var $container = $('#masonry');
        $container.imagesLoaded(function() {
            $container.masonry({
                    itemSelector: '.box',
                    gutter: 20,
                    isAnimated: true,
                });
        });
    });
</script>
{/block}